<template>
    <uni-card spacing="0" padding="0">
        <view class="header">
            <img class="icon" :src="powertotal">
            运行状态
        </view>
        <view class="charts">
            <qiun-data-charts ref="ucharts" type="ring" :opts="opts" :chartData="chartData" />
        </view>
        <view class="accounting">
            <view v-for="(item, index) in accountingList" :key="index" class="list-item">
                <view class="item-title" :style="{ backgroundColor: item.tileColor }"></view>
                <view class="item-content">
                    <span style="margin-right: 25rpx;">
                        {{ item.name }}
                    </span>
                    <span v-if="number !== 0">{{ item.map === 'sumNum' ? sumNum : runningState[item.map] }} 个</span>
                    <span v-else>无</span>
                </view>
            </view>
        </view>
    </uni-card>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import powertotal from '@/static/images/index/status.png'
import { getWarnNumber } from '@/api/report'
import { onMounted } from 'vue';
import { computed } from 'vue';
const ucharts = ref(null)

const sumNum = computed(() => {
    const rs = runningState.value
    return rs.normalNum + rs.stationErrorNum + rs.stationOperateNum + rs.transferCloseNum + rs.warnErrorNum
})
const runningState = ref({
    id: '',
    name: '',
    normalNum: 0,
    stationErrorNum: 0,
    stationOperateNum: 0,
    transferCloseNum: 0,
    warnErrorNum: 0
})

const accountingList = reactive([
    {
        name: '电站总数',
        map: 'sumNum',
        tileColor: '#000'
    },
    {
        name: '正常运行',
        map: 'normalNum',
        tileColor: '#11ad79'
    },
    {
        name: '通讯关闭',
        map: 'transferCloseNum',
        tileColor: '#b05de7'
    },
    {
        name: '外网告警',
        map: 'warnErrorNum',
        tileColor: '#e79b5d'
    },
    {
        name: '电站告警',
        map: 'stationErrorNum',
        tileColor: '#cc3c18'
    },
    {
        name: '运维提示',
        map: 'stationOperateNum',
        tileColor: '#0d3dc2'
    },
])

const chartData = ref({})

const opts = ref({
    rotate: false,
    rotateLock: false,
    color: ["#11ad79", "#b05de7", "#e79b5d", "#cc3c18", "#0d3dc2"],
    padding: [30, 30, 20, 30],
    enableScroll: false,
    ataLabel: true,
    legend: {
        show: false,
        position: "right",
        lineHeight: 25
    },
    title: {
        name: "",
        fontSize: 15,
        color: "#666666"
    },
    subtitle: {
        name: "",
        fontSize: 25,
        color: "#7cb5ec"
    },
    extra: {
        ring: {
            ringWidth: 22,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: -150,
            labelWidth: 15,
            border: false,
            linearType: true
        }
    }
})


function getServerData() {
    setTimeout(() => {
        const rs = runningState.value
        let res = {
            series: [
                {
                    data: [{ "name": "正常运行", "value": rs.normalNum },
                    { "name": "通讯关闭", "value": rs.transferCloseNum },
                    { "name": "外网告警", "value": rs.warnErrorNum },
                    { "name": "电站告警", "value": rs.stationErrorNum },
                    { "name": "运维提示", "value": rs.stationOperateNum }]
                }
            ]
        };
        chartData.value = JSON.parse(JSON.stringify(res));
    }, 300);
}

onReady(() => {
    getServerData()
})

onMounted(() => {
    const params = {
        regionId: 285,
        regionType: 2
    }
    getWarnNumber(params).then(res => {
        runningState.value = { ...res.data[0] }
    })
})

</script>

<style scoped lang="scss">
$padding: 30rpx;
$bottom-line: 1px solid rgba(224, 224, 224, 0.8);

.header {
    padding-left: 20rpx;
    width: 100%;
    border-bottom: $bottom-line;
    height: 2.6em;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #000;

    .icon {
        width: 60rpx;
        height: 60rpx;
        margin-left: -6rpx;
        margin-right: -1rpx;
    }
}

.charts {
    border-bottom: $bottom-line;
    height: 370rpx;
}

.accounting {

    .list-item {
        display: flex;
        align-items: center;
        width: 50%;
        border-bottom: $bottom-line;
        float: left;
        padding-left: $padding;
        padding-top: 21rpx;
        padding-bottom: 22rpx;

        .item-title {
            margin-left: 6rpx;
            margin-right: 22rpx;
            border-radius: 4px;
            width: 36rpx;
            height: 36rpx;
            margin-bottom: 9rpx;
        }

        .item-content {
            height: 1.5em;
            font-size: 28rpx;
            color: #000;
        }

    }
}
</style>